<template>
    <div class="login_bg">
        <div class="loginBox">
            <header class="loginHeader">
                <h1>724便利店管理系统</h1>
            </header>
            <div class="loginCont">
                <form class="loginForm" :rule="loginRules" ref="loginForm">
                    <div class="input-box">
                        <label for="account">账号：</label>
                        <input
                                type="text"
                                v-model="loginForm.account"
                                class="input-text"
                                ref="account"
                                name="account"
                                placeholder="请输入账号"
                        />
                    </div>
                    <div class="input-box">
                        <label for="password">密码：</label>
                        <input
                                type="password"
                                v-model="loginForm.password"
                                ref="password"
                                name="password"
                                placeholder="请输入密码"/>
                    </div>
                    <div class="info" v-show="displayErrMsg">{{ errMsg }}</div>
                    <div class="subBtn">
                        <input class="submit" type="button" @click="handleLogin" value="登录"/>
                        <input class="reset" type="button" value="重置"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "CvsLogin",

    data() {

        // 密码长度的校验
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error('密码的长度不能小于6'));
            } else {
                callback();
            }
        }
        return {
            loginForm: {
                account: '',
                password: ''
            },
            loginRules: {
                account: [{required: true, trigger: 'plur'}],
                password: [{required: true, trigger: 'plur', validate: validatePassword}]
            },
            errMsg: '',
            displayErrMsg: false
        }
    },
    methods: {
        handleLogin() {
            // 调用vuex的
            this.$store.dispatch('login',this.loginForm).then(()=>{
                // 路由跳转首页
                this.$router.push('/')
            })
        },
    }
}
</script>

<style scoped>
/*登录页面*/
.login_bg {
    background: url("@/assets/image/loginBg.jpg") 0 0 repeat-x;
}

.loginBox {
    width: 1000px;
    height: 713px;
    margin: 0 auto;
    /*background: url("@/assets/image/login_bg.jpg") 0 0 no-repeat;*/
}

.loginHeader {
    padding-top: 102px;
    text-align: center;
    padding-bottom: 30px;
}

.loginHeader h1 {
    color: #fff;
    text-shadow: 2px 2px #000;
}

.loginCont {
    width: 388px;
    height: 284px;
    /*border: 1px solid red ;*/
    margin: 0 auto;
}

.formBox {
    position: relative;
}

/*输入框里默认输入字体*/
::-webkit-input-placeholder {
    color: rgb(190, 188, 188);
    /*font-style: italic;*/
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: rgb(190, 188, 188);
    font-style: italic;
}

input {
    outline: none;
}

.loginForm {
    background: url("@/assets/image/formBg.png") 0 0 no-repeat;
    width: 320px;
    height: 160px;
    border-radius: 8px;
    padding: 80px 38px 48px 30px;
    /*border: 1px solid green;*/
}

.loginForm label {
    width: 20%;
    display: inline-block;
}

.input-box {
    height: 60px;
}

.info {
    color: red;
    font-weight: bold;
}

.input-box input {
    width: 66%;
    padding: 10px 5px 10px 20px;
    border: 1px solid rgb(178, 178, 178);
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0 1px 4px 0 rgba(168, 168, 168, 0.6) inset;
    box-shadow: 0 1px 4px 0 rgba(168, 168, 168, 0.6) inset;

}

/*输入框得到焦点的效果*/
.input-box input:active, .supplierAdd input:focus,
.input-box input:focus {
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    -webkit-box-shadow: 0 1px 4px 0 rgba(168, 168, 168, 0.9) inset;
    -moz-box-shadow: 0 1px 4px 0 rgba(168, 168, 168, 0.9) inset;
    box-shadow: 0 1px 4px 0 rgba(168, 168, 168, 0.9) inset;
}

.subBtn {
    margin-left: 70px;
}

/*/!*登录页登录和重置按钮*!/.supplierView a是供货商管理页面下查看详情也得返回按钮的样式*/
.submit, .reset, .supplierView a {
    width: 30%;
    cursor: pointer;
    background: #54a4d7;
    padding: 6px 18px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    font-size: 18px;
    border: 1px solid #4682be;
    margin-bottom: 10px;
    margin-right: 22px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
    0 0 0 3px rgb(254, 254, 254),
    0 5px 3px 3px rgb(210, 210, 210);
    -moz-box-shadow: 0 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
    0 0 0 3px rgb(254, 254, 254),
    0 5px 3px 3px rgb(210, 210, 210);
    box-shadow: 0 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
    0 0 0 3px rgb(254, 254, 254),
    0 5px 3px 3px rgb(210, 210, 210);

}

input[type='submit']:hover, input[type='reset']:hover {
    background: rgb(74, 179, 198);
}

input[type='submit']:active, input[type='submit']:focus,
input[type='reset']:active, input[type='reset']:focus, .supplierView a:hover, .supplierView a:active {
    background: #2a5989;
    border: 1px solid rgb(12, 76, 87);
    -webkit-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
</style>
